<template>
  <div>
    <input type="text" v-model="keyWord" />
    <h3>{{ keyWord }}</h3>
  </div>
</template>

<script>
import { ref, customRef } from "vue";
export default {
  name: "App",

  setup() {
    //自定义一个ref
    function myRef(value){
      console.log("myRef",value)
      let timer
      return customRef((track,tigger)=>{
        return{
          get(){
            console.log(`有人读取了${value}`)
            track()//追踪一下 
            return value;
          },
          set(val){
            console.log(`有人改了,新数据为:${val}`)

            value=val
            clearTimeout(timer)
            timer =setTimeout(() => {
              tigger()//重新解析模板
            }, 1000);
          }
        }
      })
    }

    // let keyWord = ref("hello");
    let keyWord = myRef("hello");

    return {
      keyWord
    };
  }
};
</script>

<style>
</style>